<template>
	<page-meta background-color="#f3f4f6;"></page-meta>
	<view class="container">
		<up-sticky>
			<up-row customStyle="padding:10px 10px;background:#ffffff;">
				<up-col span="1">
					<up-icon name="list" size="24" @click="openPicker" data-eventsync="true"></up-icon>
				</up-col>
				<up-col span="3" customStyle="font-size:16px;color:#0000ff;" @click="openPicker" data-eventsync="true">
					<text class="u-line-1">{{categoryText}}</text>
				</up-col>
				<up-col span="1">
					<up-icon name="arrow-right-double" size="16" @click="openPicker"></up-icon>
				</up-col>
				<up-col span="7">
					<up-search placeholder="请输入内容搜索关键词" :disabled="true" v-model="keyword" @click="toSearch"
						@search="handleSearch" @custom="handCustom" @clear="handClear" animation></up-search>
				</up-col>
			</up-row>
		</up-sticky>
		<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" :collection="collection"
			:where="where" loadtime="onready">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="data">
				<uni-list>
					<uni-list-item v-for="(item, index) in data" :key="index" showArrow :clickable="true"
						@click="handleItemClick(item._id)">
						<template v-slot:body>
							<text class="u-line-2">
								<text style="color:#999;">【{{item.category_id[0].text.substring(0,2)}}】</text>
								{{item.title}}
							</text>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<uni-load-more :contentText="loadMore"
				:status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
		</unicloud-db>
		<!--    <uni-fab ref="fab" horizontal="right" 
	vertical="bottom" :pop-menu="false" 
	@fabClick="fabClick" /> -->
		<!-- 		<up-popup :safeAreaInsetBottom="true" :safeAreaInsetTop="true" mode="left" 
		:show="showCO" round="20" :closeable="true"
		@close="showCO=false">
			<view class="popup-content" style="width:500rpx;height:100vh;background-color: #f8f8f8;">
			</view>
		</up-popup> -->
		<up-picker :show="showCO" :value="currentCategory" :columns="categoryList" visibleItemCount="12" keyName="text"
			@cancel="showCO=false" @confirm="handleConfirm" @close="showCO=false" ref="picker"></up-picker>
	</view>
</template>

<script>
	import {
		ref,
		toRaw,
		markRaw
	} from 'vue';

	const dbName = 'xasa-flow',	dbCategoryName = 'xasa-categories';
	const db = uniCloud.databaseForJQL();

	export default {
		setup() {
			return {
				mtitle: ref('监管实务'), // 页面标题。
				showCO: ref(false),
				udb: ref(null),
				picker: ref(null),
				categoryList: ref([
					[{
						"_id": "",
						//"value": "",
						"text": "全部类别",
					}]
				]),
				where: ref(''),
				currentCategory: '',
				categoryText: ref('全部类别'),
				keyword: ref(''),
				collection: ref([]),
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: '该类目下无更多数据了'
				}
			}
		},
		/* 		data() {
					return {
					}
				}, */
		watch: {
			mtitle: {
				handler(n, o) {
					uni.setNavigationBarTitle({
						title: `${n}(${this.categoryText})`
					})
				},
				immediate: true
			},
			categoryText: {
				handler(n, o) {
					uni.setNavigationBarTitle({
						title: `${this.mtitle}(${n})`
					})
				},
				//immediate: true
			}
		},
		onLoad(e) {
			db.collection(dbCategoryName).field('name as text,sort').get().then(
				res => {
					this.categoryList = [
						[{
							"_id": "",
							"text": "全部类别",
							"sort":0
						}, ...res.data]
					]
				}).catch(err => {
				console.error(err);
			});
			const that = this;
			this.collection = this.getCollection();
			this.getOpenerEventChannel().on('E_HandleMenu', function(data) {
				that.mtitle = data.name
			})
		},
		onReady() {
			this.udb.loadData({
				clear: true
			})

		},
		onPullDownRefresh() {
			this.udb.loadData({
				clear: true
			}, () => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			this.udb.loadMore()
		},
		methods: {
			toSearch() {

			}, // 处理搜索事件。
			handleSearch(e) {
				console.log('handleSearch', e) // 获取搜索框的值，并更新查询条件。
			},
			handCustom(e) {
				console.log('handCustom', e)
			},
			handClear(e) {
				console.log('handClear', e)
			},
			getCollection() {
				let where = this.currentCategory ? `article_status==1 && category_id=="${this.currentCategory}"` :
					'article_status==1';
				const cl = [
					db.collection(dbName).where(where).field('category_id,title,excerpt,last_modify_date').orderBy(
						'last_modify_date', 'desc').getTemp(),
					db.collection(dbCategoryName).field('name as text, _id').getTemp()
				]
				return cl
			},
			openPicker(e) {
				this.showCO = true
			},
			handleConfirm(e) {
				//const {indexs,value,values}=e;
				const {
					value
				} = e; // 获取选择的分类ID，并更新查询条件。
				const id = value[0]._id; // 更新查询条件，并重新加载数据。
				if (this.currentCategory !== id) {
					this.currentCategory = id; // 更新查询条件，并重新加载数据。
					this.categoryText = value[0].text; // 更新查询条件，并重新加载数据。
					this.collection = this.getCollection(); // 重新加载数据。
				}
				this.showCO = false; // 关闭分类选择器。
			},
			handleItemClick(id) {
				uni.navigateTo({
					url: './detail?id=' + id
				})
			}
		}
	}
</script>

<style>
</style>